<template>
  <div class="home">
    <Header></Header>
    <div class="content g960 clearfix">
      <h1 class="con-head">产品中心</h1>
      <div class="game clearfix text-left" v-for="product in ProductsList">
        <div class="icon fl">
          <router-link :to="'/product/'+product.id" tag="a"><img src="../assets/img/img_15202214713031009533.png" style="max-width: 130px;"></router-link>
        </div>
        <div class="about fl">
          <h4>
                <router-link :to="'/product/'+product.id" tag="a" v-text="product.gameName"></router-link>
              </h4>
          <p class="des detail" v-text="product.summary"></p>
          <router-link :to="'/product/'+product.id" tag="a">进入详情</router-link>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from './fragment/Header.vue'
import Banner from './fragment/Banner.vue'
import Footer from './fragment/Footer.vue'
import { ProductsList } from '../assets/js/data.js'

export default {
  name: 'Home',
  components: { Header, Banner, Footer },
  mounted() {},
  data() {
    return {
      ProductsList: ProductsList
    }
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
